<template>
    <div class="root">
        <Button class="btn-add" @click="handleAdd"> 新增 </Button>
        <Table
            class="table-box"
            bordered
            rowKey="id"
            :data-source="dataSource"
            :columns="columns"
        >
            <template v-slot:operation="{ record }">
                <div class="operation">
                    <Popconfirm
                        v-if="dataSource.length"
                        title="确定要禁用这个用户吗?"
                        @confirm="onDelete(record.key)"
                    >
                        <a>禁用</a>
                    </Popconfirm>
                    <a>修改密码</a>
                    <a>权限管理</a>
                </div>
            </template>
        </Table>
    </div>
</template>
<script>
    import { Table, Button, Popconfirm, Input } from "ant-design-vue";
    import { reactive } from "vue";
    export default {
        components: {
            Table,
            Button,
            Popconfirm,
            Input,
        },

        setup() {
            const columns = [
                {
                    title: "用户ID",
                    dataIndex: "id",
                    align: "center",
                },
                {
                    title: "用户编号",
                    dataIndex: "sn",
                    align: "center",
                },
                {
                    title: "用户姓名",
                    dataIndex: "name",
                    align: "center",
                },
                {
                    title: "电话号码",
                    dataIndex: "tel",
                    align: "center",
                },
                {
                    title: "岗位",
                    dataIndex: "job",
                    align: "center",
                },
                {
                    title: "身份证号",
                    dataIndex: "idNumber",
                    align: "center",
                },
                {
                    title: "状态",
                    dataIndex: "status",
                    align: "center",
                },
                {
                    title: "操作",
                    dataIndex: "operation",
                    align: "center",
                    slots: { customRender: "operation" },
                },
            ];
            const dataSource = reactive([
                {
                    id: "0",
                    sn: "2",
                    name: "Edward King 0",
                    tel: "12345678910",
                    job: "电工",
                    idNumber: "1232345353123",
                    status: 1,
                },
                {
                    id: "1",
                    sn: "2",
                    name: "Edward King 0",
                    tel: "12345678910",
                    job: "电工",
                    idNumber: "1232345353123",
                    status: 1,
                },
            ]);

            const handleAdd = () => {
                dataSource.push({
                    id: dataSource.length,
                    sn: "2",
                    name: "Edward King 0",
                    tel: "12345678910",
                    job: "电工",
                    idNumber: "1232345353123",
                    status: 1,
                });
            };

            return { columns, dataSource, handleAdd };
        },
    };
</script>
<style lang="scss" scoped>
    .root {
        padding: 30px;
    }
    .table-box {
        .ant-table {
            border-radius: 8px;
            overflow: hidden;
        }
    }

    .btn-add {
        margin-bottom: 8px;
        border-radius: 8px;
    }
    .operation {
        a {
            margin: 0 6px;
        }
    }
</style>
